<template>
  <div class="login-page-container">
        <div class="login-wrapper">
            <!-- 右边登录主要功能 -->
            <div class="right-login-form">
                <div class="title2">登录</div>
                <div class="form-input">
                    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane label="密码登录" name="first">
                            <el-form id="login_form" v-model="loginForm">
                                <div class="input-box">
                                    <label>账号:</label>
                                    <input type="text" v-model="loginForm.username" placeholder=" 用户名/手机号/邮箱" />
                                </div>
                                <div class="input-box">
                                    <label>密码:</label>
                                    <input type="password" placeholder="密码"  name="password" v-model="loginForm.password" />
                                </div>
                                <div style="margin-top: -10px; color: red;">{{ errorMsg }}</div>
                                <div id="geetest1" class="hidden" style="margin-left: 50px;"></div>
                                <div style="display: flex; margin-top: 10px;">
                                    <el-switch v-model="remember" active-text="记住密码" style="margin-top: -7px;" @change="rememberPassword" />
                                    <span style="margin-left: auto;">忘记密码</span>
                                </div>
                                <el-button type="success" size="large" style="width: 350px; margin-top: 10px;" @click="get_geetest_captcha">
                                    登录
                                </el-button>
                                <div style="display: flex; justify-content: center;">
                                    <router-link to="/register">没有账号？点击注册</router-link>
                                </div>
                            </el-form>
                        </el-tab-pane>
                        <!-- <el-tab-pane label="短信登录" name="second">
                            <form class="login_form2" :model="smsLoginForm">
                                <div class="input-box sms-box">
                                    <label>手机号:</label>
                                    <input type="text"  v-model="smsLoginForm.phone" placeholder="手机号码" />
                                    <div class="error" v-if="phone_error">{{ phone_error }}</div>
                                </div>
                                <div class="input-box sms-box">
                                    <label>验证码:</label>
                                    <input type="text" placeholder="请输入验证码" v-model="smsLoginForm.sms_code"/>
                                    <div class="sms-btn" @click="send_Handler">{{ sms_text }}</div>
                                    <div class="error" v-if="sms_code_error">{{ sms_code_error }}</div>
                                </div>
                                <el-button type="success" size="large" style="width: 350px; margin-top: 10px;" @click="smsLogin">
                                    登录
                                </el-button>
                                <div style="display: flex; justify-content: center;">
                                    <router-link to="/register">没有账号？点击注册</router-link>
                                </div>
                            </form>
                        </el-tab-pane> -->
                    </el-tabs>
                </div>
            </div>
        </div>
    </div>
</template>


<script setup>

import api from '../api'
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const activeName = ref('first')

//账号手机号邮箱登录
const router = useRouter()
const remember = ref(false)

const loginForm = reactive({
  username:'',
  password:''
})
const userLogin = ()=>{
  api.login(loginForm).then(res=>{
    rememberPwdHandler(res.data)
    router.push('/')
  })
}

const rememberPwdHandler = (data)=>{
  if(remember.value){
    //保存localstorage
    localStorage.setItem('token',data.access)
    localStorage.setItem('refresh',data.refresh)
    localStorage.setItem('username',data.username)
    localStorage.setItem('user_id',data.user_id)
    sessionStorage.removeItem('token')
    sessionStorage.removeItem('refresh')
    sessionStorage.removeItem('username')
    sessionStorage.removeItem('user_id')
  }else{
    sessionStorage.setItem('token',data.access)
    sessionStorage.setItem('refresh',data.refresh)
    sessionStorage.setItem('username',data.username)
    sessionStorage.setItem('user_id',data.user_id)
    localStorage.removeItem('token')
    localStorage.removeItem('refresh')
    localStorage.removeItem('username')
    localStorage.removeItem('user_id')
  }
}


//极验验证码
const errorMsg = ref('')
const get_geetest_captcha = ()=>{
    errorMsg.value = ''
    document.getElementById('geetest1').classList.remove('hidden');  // 显示
    let params = {
        username:loginForm.username
    }
    api.get_captcha({params}).then(res=>{
        console.log(res.data)
        let data = JSON.parse(res.data)
        initGeetest({
            gt: data.gt,
            challenge: data.challenge,
            product: "popup", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
            offline: !data.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注
            new_captcha: data.new_captcha
            }, handlerPopup);
    }).catch(error=>{
        errorMsg.value = error.response.data.message
        document.getElementById('geetest1').classList.add('hidden');  // 隐藏

    })
}

const handlerPopup = (captchaObj)=>{
    //极验验证码的验证方法
    captchaObj.onSuccess(function () {
        var validate = captchaObj.getValidate();
        //当用户拖动验证码成功后发送请求给后端
        let params = {
            geetest_challenge: validate.geetest_challenge,
            geetest_validate: validate.geetest_validate,
            geetest_seccode: validate.geetest_seccode
        }
        api.verify_captcha(params).then(res=>{
            if(res.data.status){
              userLogin()
            }
        })
    });
    // $("#popup-submit").click(function () {
    //     captchaObj.show();
    // });
    //避免用户频繁点击导致出现多个验证码
    document.getElementById("geetest1").innerHTML = ''
    // 将验证码加到id为geetest1的元素里
    captchaObj.appendTo("#geetest1");
}
  






</script>

<style scoped>
/* 全局容器设置 */

.login-page-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url('@images/login.png') no-repeat center/cover;;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 登录包装器 */
.login-wrapper {
  width: 30%;
  min-width: 500px;
  max-width: 1000px;
  height: 60%;
  min-height: 500px;
  background-color: #fff;
  border-radius: 40px;
  display: flex;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(31, 38, 138, 0.37);
}

/* 右侧登录表单 */
.right-login-form {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 0 40px 40px 0;
}

.title2 {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 30px;
}

.form-input{
    width: 450px;
}
.input-box {
  margin-bottom: 25px;
  display: flex;

}

.input-box label {
  margin-bottom: 8px;
  color: #333;
  font-weight: 500;
  font-size: 15px;
  margin-top: 10px;
}

.input-box input {
  width: 370px;
  padding: 12px 15px;
  border-radius: 12px;
  border: 1px solid #e3e3e3;
  background: rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
  margin-left: 15px;
}

.input-box input:focus {
  outline: none;
  border-color: #806ac4;
  box-shadow: 0 0 0 2px rgba(128, 106, 196, 0.2);
}

/* 链接样式 */
.right-login-form a {
  color: #806ac4;
  text-decoration: none;
  display: inline-block;
  margin-top: 15px;
  transition: all 0.2s ease;
}

.right-login-form a:hover {
  text-decoration: underline;
  color: #8c73d9;
}

/* Element Plus 标签页样式 */
:deep(.el-tabs__nav-wrap) {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

:deep(.el-tabs__item) {
  font-size: 16px;
  padding: 0 20px;
}

/* 短信验证码相关样式 */
.sms-box {
  position: relative;
}

.sms-box input{
    height: 20px;
    width: 350px;
}

.sms-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #806ac4;
  cursor: pointer;
  font-size: 14px;
}


.error {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}

.hidden {
  display: none;
}
</style>